<!--
 * @Descripttion:营业账单表格组件
-->
<template>
  <div>
    <div class="business-table-wrap">
      <div class="table-box">
        <el-table
          :data="tableData"
          :summary-method="getSummaries"
          show-summary
          :style="{ width: '100%', height: '3.5rem' }"
          @row-click="singleElection"
          v-loading="loading"
          element-loading-text="加载中..."
        >
          <el-table-column label="收银汇总" align="center">
            <el-table-column prop="payTypeClient" label="付款方式"> </el-table-column>
            <el-table-column prop="payTypemNum" label="笔数"> </el-table-column>
            <el-table-column prop="payTypemMoney" label="合计收入"> </el-table-column>
          </el-table-column>
          <el-table-column label="汇总" align="center">
            <el-table-column prop="bill_count" label="账单数"> </el-table-column>
            <el-table-column prop="avg_bill_amount" label="单均消费"> </el-table-column>
            <el-table-column prop="customer_count" label="消费人数"> </el-table-column>
            <el-table-column prop="avg_customer_amount" label="人均消费"> </el-table-column>
          </el-table-column>
          <el-table-column label="优惠统计" align="center">
            <el-table-column prop="discountSummaryName" label="优惠方式"> </el-table-column>
            <el-table-column prop="discountSummaryMoney" label="合计金额"> </el-table-column>
          </el-table-column>
          <el-table-column label="出品汇总" align="center">
            <el-table-column prop="foodListName" label="类目"> </el-table-column>
            <el-table-column prop="foodListNum" label="数量"> </el-table-column>
            <el-table-column prop="foodListMoney" label="销售流水"> </el-table-column>
          </el-table-column>
          <el-table-column label="退菜明细" align="center">
            <el-table-column prop="backListName" label="菜品名称"> </el-table-column>
            <el-table-column prop="backListNum" label="数量"> </el-table-column>
            <el-table-column prop="backListMoney" label="合计金额"> </el-table-column>
          </el-table-column>
          <el-table-column label="赠送明细" align="center">
            <el-table-column prop="presentListName" label="菜品名称"> </el-table-column>
            <el-table-column prop="presentListNum" label="数量"> </el-table-column>
            <el-table-column prop="presentListMoney" label="合计金额"> </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <!--  <div class="total-desc">共1条</div> -->
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { mathAdd, strNumberToFixed } from '@/utils/mathjsTool'

// 定义props
const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 定义emits
const emit = defineEmits(['singleElection'])

// 选中的单选行数
const templateSelection = ref('')

// 表格单选
const singleElection = row => {
  templateSelection.value = row.id
  emit('singleElection', row)
}

// 表格合计计算方法
const getSummaries = param => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '总价'
      return
    }
    if (column.property === 'backListName') {
      const values = data.map(item => item[column.property])
      sums[index] = 0
      values.map(data => {
        if (data) {
          sums[index] += 1
        }
      })
    } else {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => isNaN(value))) {
        // 使用精确的数学加法计算，避免浮点数精度问题
        sums[index] = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return mathAdd(prev, curr)
          } else {
            return prev
          }
        }, 0)
        // 格式化显示，保留两位小数
        if (typeof sums[index] === 'number' && !isNaN(sums[index])) {
          sums[index] = strNumberToFixed(sums[index], 2)
        }
      } else {
        sums[index] = '/'
      }
    }
  })

  return sums
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-table {
    // height: 630px;
    border-radius: 12px;
    min-width: 1800px;
  }
  .el-table__body-wrapper {
    height: 520px;
    overflow: auto;
  }
  //滚动条整体的大小
  .el-table__body-wrapper::-webkit-scrollbar {
    // width: 20px; /* 纵向滚动条 */
    // background-color: red;
    height: 8px !important; /* 横向滚动条 必写 */
  }
  //滚动条里滑动的滑块
  .el-table__body-wrapper::-webkit-scrollbar-thumb {
    height: 200px !important;
    background: #d2d2d2 !important;
    border-radius: 3px !important;
  }
  // //滚动条底层样式
  // .el-table__body-wrapper::-webkit-scrollbar-track {
  //   display: none !important;
  // }
  .el-table th.el-table__cell {
    background: #a85b62 !important;
    color: #fff !important;
    white-space: nowrap;
  }
  .el-input__inner {
    border-radius: 12px;
  }
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #7c0a03 !important;
    background: #7c0a03 !important;
  }
}

.business-table-wrap {
  width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 20px;
}
.table-box {
  width: 100%;
  border-radius: 12px;
  overflow-x: auto;
}
// .total-desc {
//   margin-top: 30px;
//   font-size: 14px;
//   font-family: PingFang SC, PingFang SC-Regular;
//   font-weight: 400;
//   text-align: left;
//   color: #333333;
</style>
